<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>c3新增属性选择器</title>
    <style>
    /* 必须是input 但是同时具备value这个属性 选择这个元素 [] */
         input[value] {
            background-color: pink;
        } 
        /* 可以根据不同的属性值选取出来 */
        input[type=text] {
            color:pink;

        } 
        /* 以谁开头^ 别忘了这个符号 */
         div[class^=icon] {
            background-color: red;
        } 
        /* 以谁结尾的别忘了$这个符号 */
         section[class$=data] {
            background-color: pink;
        } 
        /* 不分前后只要加了*就把该元素里的对应值属性全部选中 */
        /* section[class*=icon] {
            background-color: pink;
        } */
        /* 类选择器和属性选择器 伪类选择器 权重都是10 */
        
    </style>
</head>
<body>
    <!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->

    <!-- 2.属性选择器还可以选择属性=值 的某些元素 -->
  <input type="text">
  <input type="password">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
     <div class="icon1">小图标</div>
     <div class="icon2">小图标</div>
     <div class="icon3">小图标</div>
     <div class="icon4">小图标</div>
     <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
     <section class="icon2-data">我我你爹</section>
     <section class="icon3-ico">那我是谁</section>
</body>
</html>